<!--
  全局头部导航栏组件
  
  功能说明：
  - 左侧显示网站Logo和标题，点击可跳转到首页
  - 中间显示水平导航菜单，支持路由跳转
  - 右侧显示用户登录按钮
  
  组件结构：
  - 使用Ant Design Vue的栅格布局
  - 响应式设计，自适应不同屏幕尺寸
  - 业务逻辑与样式分离，便于维护
  
  @author 瑞云图库
  @description 网站全局头部导航组件
-->
<template>
  <!-- 全局头部导航栏 -->
  <a-row :wrap="false">
    <!-- 左侧：Logo和标题区域 -->
    <a-col flex="200px">
      <!-- 点击Logo跳转到首页 -->
      <RouterLink to="/">
        <div :style="titleBar">
          <!-- 网站Logo -->
          <img :style="logo" src="@/assets/logo.svg" alt="logo" />
          <!-- 网站标题 -->
          <div :style="htitle">瑞云图库</div>
        </div>
      </RouterLink>
    </a-col>
    
    <!-- 中间：导航菜单区域 -->
    <a-col flex="auto">
      <a-menu
        v-model:selectedKeys="current"
        mode="horizontal"
        :items="items"
        @click="doMenuClick"
      />
    </a-col>
    
    <!-- 右侧：用户登录区域 -->
    <a-col flex="120px">
      <div class="user-login-status">
        <!-- 登录按钮 -->
        <a-button type="primary"  >{{userstore.loginUser.userName}}</a-button>
      </div>
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
// Vue Router 组件导入
import { RouterLink } from 'vue-router'
// 导入样式配置和业务逻辑函数
import { titleBar, logo, htitle, useCurrent, useMenuClick, useMenuItems } from '.'
import { useLoginUserStore } from '@/stores/userstore'
const userstore = useLoginUserStore()
// ==================== 组件逻辑 ====================

// 当前选中的菜单项状态
const current = useCurrent()


// 菜单点击处理函数
const { doMenuClick } = useMenuClick()

// 菜单项配置数据
const { items } = useMenuItems()

</script>


